<template>
  <view class="content">
    <view class="cont">
      <view class="item" v-for="(row, i) in orderData" :key="i">
        <view class="name">对方企业:{{ row.Enterprise_Name }}</view>

        <view class="title">
          <view class="right">
            <view>{{ row.Article_Name }}</view>
            <view>联系人:
              {{ row.Seller_Contact }}
            </view>
            <view>交易量:
              <text style="color: #ff442f">{{ row.Quantity }}{{ row.Unit }}</text>
            </view>
            <view>交易金额:<text style="color: #ff442f">{{ Number(row.Amount) * Number(row.Quantity) }}元</text>
            </view>
            <view><text>已付金额:</text>{{ row.Collection_Amount }}</view>
            <view><text>未付金额:</text>{{
              (
                Number(row.Amount) * Number(row.Quantity) -
                Number(row.Collection_Amount)
              ).toFixed(2)
            }}</view>
          </view>
          <!-- <view class="right con"> </view> -->
        </view>
      </view>
    </view>
    <!-- 下拉提示 -->
    <view class="text-center py-2">
      <text>{{ BottomFont }}</text>
      <uni-icons v-if="BottomFont == '加载中...'" type="spinner-cycle"></uni-icons>
    </view>
    <view v-if="tag" @click="goTop" class="bg-white flex align-center justify-center" style="
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        box-shadow: 0 0 15rpx rgba(0, 0, 0, 0.5);
        position: fixed;
        bottom: 150rpx;
        right: 50rpx;
      ">
      <image style="width: 80%; height: 80%" src="https://digital.essc.top/dist/zjl_icon/gotop.png" mode=""></image>
    </view>
    <!--下拉提示  -->
  </view>
</template>

<script>
import { getGroupSeekTransactionAllAction } from "@/api/purchasedgoods.js";
export default {
  data() {
    return {
      form: {
        Article_Name: "",
        Enterprise_Info_SerialNumber: "",
        Group_Seek_Purchase_SerialNumber: "",
        Row_Status: "",
        Type: "1",
        limit: "5",
        page: "1",
      },
      orderData: [],
      total: 0,
      BottomFont: "下拉获取更多",
      num: 0,
      tag: false,
    };
  },
  onReachBottom() {
    this.tag = true;
    //触底事件
    if (this.num != this.total) {
      //如果未超过所有数则调用请求
      this.form.page++;
      this.ExpandChange(this.form);
    } else {
      //反之改变底部字体
      this.BottomFont = "已经到底了";
    }
  },
  methods: {
    async ExpandChange(form) {
      // console.log(e);
      // this.row = e;
      uni.showLoading({
        title: "加载中...",
      });
      this.BottomFont = "加载中...";
      const res = await getGroupSeekTransactionAllAction({
        data: form,
      });
      if (res.redirect && res.redirect == "REDIRECT") {
        uni.navigateTo({
          url: "/pages/My/Login",
        });
      } else if (res.Status == "success") {
        this.orderData.push(...res.tableData);
        this.total = Number(res.limit);
        uni.hideLoading();
        this.num = this.orderData.length;
        if (this.num == this.total) {
          this.BottomFont = "没有更多了";
        } else {
          this.BottomFont = "已经到底了";
        }
      }
    },
    goTop() {
      //返回顶部
      uni.pageScrollTo({
        scrollTop: 0,
      });
      this.tag = false;
    },
  },
  onLoad(options) {
    this.form.Enterprise_Info_SerialNumber =
      options.Enterprise_Info_SerialNumber;
    this.form.Group_Purchasing_SerialNumber =
      options.Group_Purchasing_SerialNumber;
    this.ExpandChange(this.form);
  },
};
</script>

<style lang="scss">
.content {
  background-color: #f5f5f5;
  width: 100%;
  padding-bottom: 100rpx;

  .cont {
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;

    .item {
      border-radius: 20rpx;
      background-color: #fff;
      padding: 20rpx;
      box-sizing: border-box;
      margin: 0 0 30rpx 0;

      .name {
        padding: 20rpx;
        border-bottom: 1px solid #f5f5f5;
        font-weight: bold;
        font-size: 30rpx;
      }

      .title {
        padding: 10px;
        box-sizing: border-box;

        .right {
          // width: 50%;
          // height: 200rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          font-size: 12px;
          align-items: flex-start;
          font-size: 30rpx;

          view {
            // text-align: right;
            margin: 10rpx 0;
          }
        }

        .con {
          // width: 50%;
          align-items: flex-start;
        }
      }

      .diz {
        border-top: 1px solid #f5f5f5;
        padding: 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
}
</style>
